<template>
	<view>
		<view class="shop">
			<view class="title">商品信息</view>
			<view class="li">
				<view class="shop">
					<image :src="orderDetails.image"  lazy-load = "true" mode="aspectFill"/>
				
					<view class="msg">
						<view class="name black">{{orderDetails.goodsName}}</view>
						
						<view class="sizr gray " >颜色：{{orderDetails.sku[0].split(':')[1]}}</view>
						<view class="sizr gray ">尺码：{{orderDetails.sku[1].split(':')[1]}}</view>
					       
					</view>
				</view>
				<view class="genre">
					共1件
					<view class="price">
						合计：
						<text>¥{{orderDetails.actualPrice}}</text>
					</view>
				</view>
			</view>
		</view>
		<view class="msglist" v-if="orderDetails.orderSn">
			<view class="title">订单信息</view>
			<view class="list">
				<text>订单号</text>
				：{{orderDetails.orderSn}}
			</view>
			<view class="list">
				<text>下单时间</text>
				：{{orderDetails.createdTime}}
			</view>
			<view class="list">
				<text>订单状态</text>
				：{{  orderDetails.orderAppTag}} 
			</view>
			<view class="list">
				<text>下单备注</text>
				：{{  orderDetails.remark}} 
			</view>
		</view>
		<view class="msglist">
			<view class="title">收货信息</view>
			<view class="list">
				<text>收货人</text>
				：{{orderDetails.contactUser}}
			</view>
			<view class="list">
				<text>收货人电话</text>
				：{{orderDetails.contactPhone}}
			</view>
			<view class="list">
				<text>收货人地址</text>
				：{{ orderDetails.province}} {{ orderDetails.city}} {{ orderDetails.region}} {{orderDetails.addrDetail}}
			</view>
		</view>
		<view class="msglist">
			<view class="title">代理信息</view>
			<view class="list">
				<text>下单人</text>
				：{{orderDetails.buyer}}
			</view>
			<view class="list">
				<text>代理电话</text>
				：{{orderDetails.mobile}}
			</view>
			<view v-if="orderDetails.orderFrom.value!==3">
				<view class="list">
					<text>上交款</text>
					：{{orderDetails.needPay}}
				</view>
				<view class="list">
					<text>上交人</text>
					：{{orderDetails.payer}}
				</view>
				<view class="list">
					<text>需收款</text>
					：{{orderDetails.needReceive}}
				</view>
				<view class="list">
					<text>收款人</text>
					：{{orderDetails.receivor}}
				</view>
				<view class="list">
					<text>订单收益</text>
					：{{orderDetails.profit}}
				</view>
			</view>
			
		</view>
		<!-- <view class="bottom"><view class="button" @click="sub()">审核通过</view></view>
		<view class="bottom"><view class="button" @click="cancel()">拒绝</view></view> -->
	</view>
</template>

<script>
import { uniIcons } from '@dcloudio/uni-ui';
import order from '../../../servers/agent/order/order.js';
export default {
	components: { uniIcons },
	data() {
		return {
			id:'',
			orderDetails:''
		};
	},
	onLoad(option) {
		this.id=option.id;
	},
	mounted() {
		// var _this = this
		// uni.getStorage({
		//     key: 'orderIdorderdetails',
		//     success: function (res) {
		//         _this.id = res.data;
		// 		_this.initData();
		//     }
		// });
		this.initData();
	},
	methods: {
		initData(){
			uni.showLoading({
			    title: '数据加载中',
				mask:true
			});
			order.claimDetils(this.id)
				.then(res => {
					console.log(res)
					this.orderDetails = res.data;
					var sku=[];
					if(this.orderDetails.productSkuDesp){
						sku=this.orderDetails.productSkuDesp.split(",");
					}
					this.orderDetails.sku=sku;
					this.orderDetails.image=this.imgCDNUrl + this.orderDetails.goodsImg;
					 uni.hideLoading();
			
				})
				.catch(err => {
					console.log(new Error('请检查网络后重试'));
				});	
		},
		sub() {
			console.log('subs');
		},
		cancal(){
			
		}
	}
};
</script>

<style lang="less" scoped>
.shop {
	padding: 1rpx 20rpx;
	background: #ffffff;
	.title {
		line-height: 28rpx;
		font-size: 28rpx;
		border-left: 5rpx solid #bd3c8c;
		padding-left: 16rpx;
		margin-top: 50rpx;
	}
	.li {
		padding: 50rpx 0;
		border-bottom: 1px solid #e1e1e1;
		.shop {
			position: relative;
			display: flex;
			flex-direction: row;
			image {
				width: 230rpx;
				height: 230rpx;
				border-radius: 10rpx;
			}
			.msg {
				width: 431rpx;
				margin-left: 37rpx;
				line-height: 46rpx;
				.name {
					font-size: 28rpx;
					height: 100rpx;
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 2;
				}
				.type {
					font-size: 26rpx;
				}
				.gray {
					color: #999999;
					font-size: 26rpx;
					line-height: 42rpx;
				}
			}
		}
		.genre {
			padding-top: 54rpx;
			text-align: right;
			color: #999999;
			font-size: 26rpx;
			.price {
				display: inline-block;
				color: #333333;
				margin-left: 29rpx;
				text {
					font-size: 30rpx;
					color: #333333;
				}
			}
		}
	}
	.li:nth-last-child(1) {
		border-bottom: none;
	}
}
.msglist {
	border-top: 26rpx solid #efefef;
	padding: 10rpx 20rpx;
	line-height: 60rpx;
	background: #ffffff;
	.title {
		line-height: 28rpx;
		font-size: 28rpx;
		border-left: 5rpx solid #bd3c8c;
		padding-left: 16rpx;
		margin: 20rpx 0;
	}
	.list {
		font-size: 26rpx;
		color: #999999;
	}
}
.bottom {
	margin-top: 26rpx;
	padding: 1rpx;
	height: 212rpx;
	background: #ffffff;
	.button {
		height: 90rpx;
		line-height: 90rpx;
		margin: 63rpx 20rpx;
		text-align: center;
		color: #ffffff;
		border-radius: 50px;
		font-size: 32rpx;
		background: linear-gradient(90deg, #d2158a, #fc6395);
	}
}
</style>
